/**
 * Created by Ysssssss on 2021/4/30.
 */

import React, { PureComponent } from 'react'
import ShoppingMallPreviewShareIcon from "@components/shoppingMall/ShoppingMallPreviewShareIcon";
import {Row, Col, Radio} from 'antd'
import {DesignTemplateContext} from "@pages/shoppingMall/ShoppingMallDesignDetailPage";
import {arrayToObject} from "@utils/arrayHelper";
import ColorRadio from "@common/presentational/ColorRadio";
import ParamsInput from "@common/presentational/ParamsInput";
import notify from "@utils/tip";
import {getHistoryMatchParams} from "@utils/setUrlQuery";
import {withRouter} from "react-router-dom";

const themeColorList = [{
    value: '#F4520B',
    name: '热橙'
}, {
    value: '#CF8668',
    name: '咖啡棕'
}, {
    value: '#F9BC23',
    name: '柠檬黄'
}, {
    value: '#EA0B26',
    name: '火红'
}, {
    value: '#1F9B51',
    name: '嫩绿'
}, {
    value: '#49A292',
    name: '青翠'
}, {
    value: '#27A0FF',
    name: '纯蓝'
}, {
    value: '#3B49DF',
    name: '耀紫'
}, {
    value: '#353235',
    name: '炫黑'
}]
const themeColorMap = arrayToObject(themeColorList, 'value')

@withRouter
class GlobalDesign extends PureComponent {
    static contextType = DesignTemplateContext;

    constructor(props, context) {
        super(props, context);
        const { templateInfo, subNav } = context
        const { global } = templateInfo
        this.state = {
            themeType: themeColorMap[global.theme] ? 'default' : 'customize'
        }

        const { platformId } = getHistoryMatchParams(props)
        if (!subNav.includes('global')) {
            props.history.replace(`/shopping-mall/design/${platformId}/detail`)
        }
    }

    onThemeTypeChange (e) {
        this.setState({
            themeType: e.target.value
        })
    }

    onThemeChange (value) {
        if (!/^#[0-9a-fA-F]{6}$/.test(value)) {
            notify('色值格式不正确')
            return ;
        }
        const { onChange, templateInfo } = this.context
        onChange && onChange('global', {
            ...templateInfo.global,
            theme: value,
        })
    }

    onTargetChange (key, e) {
        const { onChange, templateInfo } = this.context
        onChange && onChange('global', {
            ...templateInfo.global,
            [key]: e.target.value
        })
    }

    render () {
        const { themeType } = this.state
        const { templateInfo } = this.context
        const { global } = templateInfo
        return (
            <>
                <div className="preview-container">
                    <div className="preview-reality global-preview">
                        <img src={global.mode === 'white' ? require('@assets/image/design-global-light.png') : require('@assets/image/design-global-dark.png')} alt="" className="global-preview-image"/>
                        <div className="global-preview-price" style={{color: global.theme}}>¥599</div>
                        <div className={`global-preview-button ${global.style}`} style={{backgroundColor: global.theme}}>
                            <div className="global-preview-button-content">加入购物袋</div>
                            <div className="global-preview-button-content">立即购买</div>
                        </div>
                    </div>
                </div>
                <div className="operation-container ft-clr-d">
                    <div className="ft-16">全局风格</div>
                    <div className="ft-12 ft-clr-ml pdb-16 bdb-l">结合品牌定位及目标受众的视觉偏好，选择适合的品牌调性</div>
                    <Row className="mgt-24">
                        <Col span={6}>选择模式：</Col>
                        <Col span={18}>
                            <Radio.Group onChange={this.onTargetChange.bind(this, 'mode')} value={global.mode}>
                                <Radio value="white">浅色模式</Radio>
                                <Radio value="black">深色模式</Radio>
                            </Radio.Group>
                        </Col>
                    </Row>
                    <Row className="mgt-36">
                        <Col span={6}>选择模式：</Col>
                        <Col span={18}>
                            <Radio.Group value={themeType}
                                         onChange={this.onThemeTypeChange.bind(this)}
                            >
                                <Radio value="default">默认色板</Radio>
                                <Radio value="customize">自定义</Radio>
                            </Radio.Group>
                        </Col>
                    </Row>
                    { themeType === 'default' ? (
                        <Row className="mgt-12">
                            <ColorRadio colorList={themeColorList}
                                        value={global.theme}
                                        onChange={this.onThemeChange.bind(this)}
                            />
                        </Row>
                    ) : (
                        <Row className="mgt-12">
                            <Col span={6} />
                            <Col span={18}>
                                <ParamsInput className="w-100" value={global.theme} onChange={this.onThemeChange.bind(this)}/>
                            </Col>
                        </Row>
                    )}
                    <Row className="mgt-36">
                        <Col span={6}>选择风格：</Col>
                        <Col span={18}>
                            <Radio.Group value={global.style}
                                         onChange={this.onTargetChange.bind(this, 'style')}
                            >
                                <Radio value="circle">亲和（圆角）</Radio>
                                <Radio value="square">品质（直角）</Radio>
                            </Radio.Group>
                        </Col>
                    </Row>
                </div>
            </>
        )
    }
}

export default GlobalDesign